<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input
                v-model = "listQuery.title"
                placeholder = '书名'
                style = "width:200px"
                class="filter-item"
                clearable
                @key.enter.native = "handleFilter"
                @click = "handleFilter"
                @blur="handleFilter"
            ></el-input>
            <el-input
                    v-model = "listQuery.author"
                    placeholder = '作者'
                    style = "width:200px"
                    class="filter-item"
                    clearable
                    @key.enter.native = "handleFilter"
                    @click = "handleFilter"
                    @blur="handleFilter"
            ></el-input>
            <el-select
                v-model="listQuery.category"
                placeholder="分类"
                clearable
                class="filter-item"
                @change="handleFilter"
                @clear="handleFilter"
            >
                <el-option
                    v-for="item in categoryList"
                    :key="item.value"
                    :label="item.label+'('+item.num+')'"
                    :value="item.label"
                />
            </el-select>
            <el-button
                v-waves
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                style="margin-left: 10px;"
                @click="handleFilter"
            >查询</el-button>
            <el-button
                v-waves
                class="filter-item"
                type="primary"
                style="margin-left: 10px;"
                @click="handleCreate"
            >新增</el-button>
            <el-checkbox
                v-model="showCover"
                class="filter-item"
                style="margin-left: 5px;"
                @change="changeShowCover"
            >
                显示封面
            </el-checkbox>
        </div>
        <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            fit
            hightlight-current-row
            style="width: 100%;"
            :default-sort="defaultSort"
            @sort-change="sortChange"
        >
            <!--表格里面的具体项-->
            <el-table-column
                label="ID"
                prop="id"
                sortable="custom"
                align="center"
                width="80"
            >
          </el-table-column>
          <el-table-column
                  label="书名" width="150" align="center"
          >
                <template slot-scope="{row:{ titleWrapper }}">
                    <span v-html="titleWrapper"></span>
                </template>
            </el-table-column>
            <el-table-column label="作者" width="150" align="center">
                <template slot-scope="{row:{authorWrapper}}">
                    <span v-html="authorWrapper"></span>
                </template>
            </el-table-column>
            <el-table-column
                    label="出版社" prop="publisher" width="150" align="center"
            ></el-table-column>
            <el-table-column
                    label="分类" prop="categoryText" width="100" align="center"
            ></el-table-column>
            <el-table-column
                    label="语言" prop="language" align="center"
            ></el-table-column>

            <el-table-column
                    v-if="showCover"
                    label="封面" width="150" align="center"
            >
                <template slot-scope="{row:{cover}}">
                    <a :href="cover" target="_blank">
                        <img :src="cover" alt="" style="width: 120px;height: 180px;">
                    </a>
                </template>
            </el-table-column>
            <el-table-column
                    label="文件名" prop="fileName" width="100" align="center"
            ></el-table-column>
            <el-table-column
                    label="文件路径" prop="filePath" width="100" align="center"
            ></el-table-column>
            <el-table-column
                    label="封面路径" prop="coverPath" width="100" align="center"
            ></el-table-column>
            <el-table-column
                    label="解压路径" prop="unzipPath" width="100" align="center"
            ></el-table-column>
            <el-table-column
                    label="上传人" width="100" align="center"
            >
                <template slot-scope="{row:{createUser}}">
                    <span>{{createUser | valueFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="上传时间" width="100" align="center"
            >
                <template slot-scope="{row:{createDt}}">
                    <span>{{createDt | timeFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作" width="120" align="center"
                    fixed="right"
            >
                <template slot-scope="{row}">
                    <el-button type="text" icon="el-icon-edit" @click="handleUpdate(row)"></el-button>
                    <el-button type="text" icon="el-icon-delete" @click="handleDelete(row)" style="color: #F56c6c;"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total = 'total'
            :page.sync="listQuery.page"
            :limit.sync="listQuery.pageSize"
            @pagination="refresh"
        ></pagination>
    </div>
</template>

<script>
    import Pagination from '../../components/Pagination/index'
    import {getCategory,listBook,deleteBook} from '../../api/book'
    import { parseTime } from '@/utils'
    import waves from '../../directive/waves'

    export default {
        name: "list",
        data(){
          return{
              tableKey:0,
              total:0,
              listLoading:true,
              list:[],
              listQuery:{

              },
              defaultSort:{},
              showCover:false,
              categoryList:[]
          }
        },
        // 设置初始参数
        created(){
            this.parserQuery()
        },
        mounted(){
            this.getList()
            this.getCategoryList()
        },
        directives:{
            waves
        },
        // 自定义过滤器
        filters:{
          valueFilter(value){
              return value || '无'
          },
            timeFilter(time){
              return time?parseTime(time, '{y}-{m}-{d} {h}:{i}'):'无'
            }
        },
        components:{
            Pagination
        },
        // 实现刷新页面 过滤的数据条件还在 2
        beforeRouteUpdate(to, from, next){
            console.log(to,from)
            if(to.path === from.path){
                const newQuery = Object.assign({},to.query)
                const oldQuery = Object.assign({},from.query)
                if(JSON.stringify(newQuery) !== JSON.stringify(oldQuery)){
                    this.getList()
                }
            }
            next()
        },
        methods:{
            // 删除电子书
            handleDelete(row){
                // console.log(row)
                this.$confirm('此操作将永久删除该电子书，是否继续？','提示',{
                    confirmButtonText: "确定",
                    cancelButtonText: '取消',
                    type:'warning'
                }).then(()=>{
                    deleteBook(row.fileName).then(response =>{
                        this.$notify({
                            title:'成功',
                            message:response.msg || '成功',
                            type:'success',
                            duration:2000
                        })
                        this.handleFilter()
                    })
                })
            },
            //初始化参数
            parserQuery(){
                // 实现 刷新页面还带着原来的参数
                const query = Object.assign({}, this.$route.query)
                let sort = '+id'
                const listQuery ={
                    page:1,
                    pageSize:10,
                    sort:'+id'
                }
                if(query){
                    query.page && (query.page = +query.page)
                    query.pageSize && (query.pageSize = +query.pageSize)
                    query.sort && (sort = query.sort)
                }
                const sortSymbol = sort[0]
                const sortColumn = sort.slice(1, sort.length)
                this.defaultSort={
                    prop:sortColumn,
                    order:sortSymbol==='+'?'ascending':'descending'
                }
                this.listQuery = {...listQuery,...query}
            },
            // 获取数据
            getList(){
              this.listLoading=true
              listBook(this.listQuery).then(response=>{
                  const {list,count} = response.data
                  console.log(list)
                  this.list = list
                  this.total = count
                  this.listLoading = false

                  this.list.forEach(book=>{
                      book.titleWrapper = this.WrapperKeyWord('title',book.title)
                      book.authorWrapper = this.WrapperKeyWord('author', book.author)
                  })
              })
            },
            // 搜索文字高亮
            WrapperKeyWord(k,v){
                function highlight(value){
                    return `<span style="color: #1890ff">${value}</span>`
                }
                if(!this.listQuery[k]){
                    return v
                }else{
                    return v.replace(new RegExp(this.listQuery[k],'ig'), v=>highlight(v))
                }
            },
            // 排序
            sortChange(data){
                console.log('cortChange',data)
                const {prop, order} = data
                this.sortBy(prop, order)
            },
            sortBy(prop, order){
                if(order === 'ascending'){
                    this.listQuery.sort = `+${prop}`
                }else{
                    this.listQuery.sort = `-${prop}`
                }
                this.handleFilter()
            },
            // 实现刷新页面 过滤的数据条件还在 1
            refresh(){
                console.log('进入refresh')
                this.$router.push({
                    path: '/book/list',
                    query: this.listQuery
                })
            },
            // 条件筛选
            handleFilter(){
                this.listQuery.page = 1
                this.refresh()

            },
            //
            handleCreate(){
                console.log('handleCreate新增')
            },
            // 封面图是否显示
            changeShowCover(value){
                console.log('changeShowCover封面显示控制')
                this.showCover = value
            },
            getCategoryList(){
                getCategory().then(response=>{
                    this.categoryList = response.data
                })
            },
            // 修改电子书
            handleUpdate(row){
                console.log('handleUpdate',row)
                this.$router.push(`/book/edit/${row.fileName}`)
            }
        }
    }
</script>

<style lang="stylus" scoped>

</style>